<template>
  <div class="formbox">
    <el-form label-width="120px" :rules="ruless" :model="form">
      <el-form-item label="分类名称:" prop="name">
        <el-input widtn="100px" v-model="form.name" />
      </el-form-item>
      <el-form-item label="上级分类:" prop="parentId">
        <el-select
          class="m-2"
          placeholder="无上级分类"
          size="large"
          v-model="list"
        >
          <el-option
            v-for="item in roles"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="数量单位:" prop="productUnit">
        <el-input v-model="form.productUnit" />
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model="form.sort" />
      </el-form-item>
      <el-form-item label="是否显示:" prop="showStatus">
        <el-radio-group class="ml-4" v-model="form.showStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示导航栏:" prop="navStatus">
        <el-radio-group class="ml-4" v-model="form.navStatus">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分类图片:" prop="icon">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          action="http://127.0.0.1:5173/api/minio/upload"
          list-type="picture"
          :on-exceed="handleExceed"
          :on-preview="handlePreview"
          :on-success="handleSuccess"
        >
          <template #trigger>
            <el-button type="primary">点击上传</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">只能上传jpg/png文件,且不超过100kb</div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="筛选属性:" prop="productAttributeIdList">
        <div class="m-4">
    <el-cascader v-model="val" :options="options" @change="handleChange"  :props="props" />
  </div>
        <el-button type="primary">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">新增</el-button>
      </el-form-item>
      <el-form-item label="关键词:" prop="keywords">
        <el-input v-model="form.keywords" />
      </el-form-item>
      <el-form-item label="分类描述:" prop="description">
        <el-input v-model="form.description" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="Submitbrand">提交</el-button>
        <el-button @click="zhongzhi">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
import {
  ElMessage,
  ElMessageBox,
  genFileId,
  UploadInstance,
  UploadProps,
  UploadRawFile,
} from "element-plus";
import { reactive, ref, watch } from "vue";
import {
  ProductCategoryListWithChildrenApi,
  ProductCategoryCreateApi,
  ProductCategoryApi,
  ProductCategoryUpdateApi,
  ProductCategoryListwithAttrApi,
} from "./api/api";
const router = useRouter();
const route = useRoute();
// 下拉上级分类
const list = ref<number[]>([]);
const  roles = ref<{ value: number; label: string}[]>([]);
ProductCategoryListWithChildrenApi().then((res) => {
  if (res.code === 200) {
    roles.value = res.data.map((item) => ({
      label: item.name,
      value: item.id,
    }));
  }
});

const val = ref([])
const props = {
  expandTrigger: 'hover' as const,
}
const handleChange = (val:any) => {
  console.log(val)
}
const options = ref<{ value: number; label: string,children:object }[]>([]);
ProductCategoryListwithAttrApi().then((res) => {
  if (res.code === 200) {
    options.value = res.data.map((item) => ({
      label: item.name,
      value: item.id,
      children:item.productAttributeList
    }));
  }
});
const form = reactive({
  description: "",
  icon: "",
  keywords: "",
  name: "",
  navStatus: 0,
  parentId: 0,
  productAttributeIdList: [],
  productUnit: "",
  showStatus: 0,
  sort: 0,
});
const ruless = reactive({
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
});
// 添加
const Addcate = () => {
  ProductCategoryCreateApi(form).then((res) => {
    if (res.code === 200) {
      ElMessage.success("添加成功");
      router.push("/pms/productCate");
    }
  });
};
// 编辑
const id = route.query.id;
if (id) {
  ProductCategoryApi(parseInt(id as string), form).then((res) => {
    if (res.code === 200) {
      Object.assign(form, res.data);
    }
  });
}

const Editcate = () => {
  ProductCategoryUpdateApi(parseInt(id as string), form).then((res) => {
    if (res.code === 200) {
      ElMessage.success("修改成功");
      router.push("/pms/productCate");
    }
  });
};
// 提交
const Submitbrand = () => {
  ElMessageBox.confirm("是否提交信息", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      if (id) {
        Editcate();
      } else {
        Addcate();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};
// 重置
const zhongzhi = () => {
  (form.description = ""),
    (form.icon = ""),
    (form.keywords = ""),
    (form.name = ""),
    (form.navStatus = 0),
    (form.parentId = 0),
    (form.productAttributeIdList = []),
    (form.productUnit = ""),
    (form.showStatus = 0),
    (form.sort = 0);
};
// 图片上传
const uploadRef = ref<UploadInstance>();
const handleExceed: UploadProps["onExceed"] = (files) => {
  uploadRef.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  uploadRef.value!.handleStart(file);
};

const submitUpload = () => {
  uploadRef.value!.submit();
  console.log("122", uploadRef.value!.submit());
};
const handleSuccess: UploadProps["onSuccess"] = (response: any, uploadFile) => {
  form.icon = uploadFile.url as string;
};
const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log("222", "previ", uploadFile);
};
</script>
<style lang="less" scoped>
.formbox {
  width: 600px;
  margin: 0 auto;
  border: 1px solid #eee;
  padding-top: 30px;
  :deep(.el-form-item) {
    padding-top: 20px;
  }
  :deep(.el-input) {
    width: 400px;
  }
  :deep(.upload-demo) {
    width: 50px;
  }
  .el-upload__tip {
    width: 300px;
  }
}
</style>
